<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>gird表格</title>
        <!-- 适应移动设备 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="./css/bootstrap.css">
        <script src="./jquery-3.5.1.min.js"></script>
        <script src="./js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <span>基本网格结构</span>
            <div class="container" style="border: 1px solid;">
                <div class="row" style="height: 25px;">
                   <div class="col-md-6" style="background-color: blue;height: 25px;"></div>
                   <div class="col-md-6"  style="background-color: red;height: 25px;"></div>      
                </div>
                <div class="row"  style="background-color: gold;height: 25px;"></div>
            </div>
            <br/>
            <span>偏移列使用（居中使用）</span>
            <div class="container" style="border: 1px solid;">
                <div class="row" style="height: 25px;">
                    <div class="col-md-6 col-md-offset-3" style="height: 25px;background-color: blueviolet;"></div>
                </div>
            </div>
            <br/>
            <span>嵌套列</span>
            <div class="container" style="border: 1px solid black;">
                <div class="row">
                    <div class="col-md-3" style="height: 25px;background-color: gray;"></div>
                    <div class="col-md-9" style="background-color: green;">
                        <div class="row">
                            <div class="col-md-6" style="height: 25px;background-color: aqua;">嵌套列111</div>
                            <div class="col-md-2" style="height: 25px;background-color: brown;">嵌套列222</div>
                        </div>
                    </div>
                </div>
            </div>
            <br/>
            <span>列排序1</span>
            <div class="container">
                <div class="row">
                    <p style="text-align: center;">排序前</p>
                    <div class="col-md-4" style="height: 25px;background-color: aqua;"></div>
                    <div class="col-md-8" style="height: 25px;background-color: greenyellow;"></div>
                </div>
                <div class="row">
                    <p style="text-align: center;">排序后</p>
                    <div class="col-md-4 col-md-push-8" style="height: 25px;background-color: aqua;"></div>
                    <div class="col-md-8 col-md-pull-4" style="height: 25px;background-color: green;"></div>
                </div>
            </div>
            <span>列排序2</span>
            <div class="container">
                <div class="row">
                    <div id="px1" class="col-md-4" style="height: 25px;background-color: aqua;"></div>
                    <div id="px2" class="col-md-8" style="height: 25px;background-color: green;"></div>
                </div>
            </div>
        </div>
    </body>
    <script>
        window.onload=function(){
            func1();
        }
        function func1(){
            var flag = false; 
            setInterval(function(){
                flag = !flag;
                if(flag){
                    $('#px1').addClass('col-md-push-8');
                    $('#px2').addClass('col-md-pull-4');
                }else{
                    $('#px1').removeClass('col-md-push-8');
                    $('#px2').removeClass('col-md-pull-4');
                }
            },3000);
        }
    </script>
</html>